<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>弦外取歌</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
        button {
            float: left;
            width: 150px;
            height: 34px;
            font: 400 14px/34px "microsoft yahei";
            color: white;
            background: #3385ff;
            cursor: pointer;
            border:1px solid white;
        }

        button:hover {
            background: #317ef3;
        }
        .footer{
            width: 300px;
            margin: 0 auto;
            position: fixed;
            bottom: 0;
            padding-bottom: 20px;
            z-index: 1111;
            left: 0;
            right: 0;
            background-color:white;
        }
        form{
            width: 100%;
            font-size: 1em;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;

        }
        #search {
            width: 300px;
            padding: 50px 0 10px 50px;
            position: fixed;
            background-color:white;
            z-index: 111;
        }
        #showM{
            position: relative;
            margin: 50px 50px 350px 50px;
            bottom:150px;
            top:100px;
            overflow-y: auto
        }
        #content{position: absolute;}
    </style>
</head>
<body  id="content">
<form>
    <div id="search">
        歌名：<input type="text" id="s" value="" placeholder="比如“卡农”"><br>
        作者：<input type="text" id="n" value="" placeholder="比如“烛子”"><br>
        <input type="button" id="g" value="搜索">
    </div>
    <div class="footer">
        <p><input type="checkbox" name="item"><label>无暂停键</label>
            <input type="checkbox" name="item"><label>多弹</label></p>
        <p><input type="checkbox" name="item"><label>按键初始化</label>
            <input type="checkbox" name="item"><label>HOME在左</label></p>
        <p>速度：<input type="number" id="b" value="1"></p>
        <p>当前歌曲：<span id="musicName">未选择</span></p>
        <button id="actions" type="button">弹奏</button>
        <button id="cancel" type="button">取消</button>
    </div>
    <div>
        <!--<textarea id="show" style="width:1000px;height: 300px;"></textarea>-->
    </div>
</form>
<div id="showM"></div>
<script>
    document.getElementById('s').onkeyup = k => {
        if(k.key=='Enter'){
            searchBut()
        }
    }
    searchBut=function () {
        var sv=$('#s').val();
        if(!sv)return;
        showM.children().remove();
        search('https://kilomelo.cn/smtool/api/v1.2.0/music/findPage',{offset:10,direction:'desc',searchContent:sv})
    }

    document.getElementById('g').onclick=searchBut;
    showM=$("#showM"),musicName=$("#musicName");
    music={},id='',name=""
    search=(u,d)=>{
        $.get(u,d,(e)=>{
            let list=e.data.list
            authorName=$('#n').val()
            for(l of list) {
                if(!authorName||l.authorName.indexOf(authorName)>=0)
                    showM.append(
                        "<input type='button' value='"+l.name+"--"+l.authorName+"("+l.playTime
                        +"秒)'onclick='window.id=\""+l.id
                        +"\";window.name=\""+l.name
                        +"\";musicName.html(this.value)'>"
                    )
            }
            setTimeout(()=>{if(list.length==10){
                d.clientTime=e.data.clientTime
                d.cursorId=list[9].id
                search(u,d)
            }},300)
        });
    }
    checked=()=>{
        let str=' '
        var radioList = document.getElementsByName('item');
        for (var i = 0, len = radioList.length; i < len; i++) {
            str+=radioList[i].checked == ""?'':i
        }
        return str
    }
    function actions(data) {//数据提交 post 请求
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/set_event", true);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.onreadystatechange = function() {
            var XMLHttpReq = xhr;
            if (XMLHttpReq.readyState == 4) {
                if (XMLHttpReq.status == 200) {
                    var text = XMLHttpReq.responseText;
                    console.log(text);
                } else {
                    console.log(XMLHttpReq.status)
                }
            } else {
                console.log(XMLHttpReq.readyState);
            }
        };
        //alert('{"name": "showUI_commit","value":' + data + '}')
        let str='{"name": "showUI_commit","value":"' + data+ '"}'

        //$("#show").val(str)

        xhr.send(str);
    }

    function closed() {//取消 post请求
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/set_event", true);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.onreadystatechange = function () {
            var XMLHttpReq = xhr;
            if (XMLHttpReq.readyState == 4) {
                if (XMLHttpReq.status == 200) {
                    var text = XMLHttpReq.responseText;
                    console.log(text);
                } else {
                    console.log(XMLHttpReq.status)
                }
            } else {
                console.log(XMLHttpReq.readyState);
            }
        };
        xhr.send('{"name": "showUI_cancel"}');
    }
    document.getElementById('actions').onclick = function () {//数据提交按钮点击
        let c=checked(),b=$('#b').val()
        actions(id+','+c+','+b+','+name);
    }
    document.getElementById('cancel').onclick = function () {//取消按钮点击
        closed();
    }

    const contentDOM = document.getElementById('content');
    function rotate() {
        const width = document.documentElement.clientWidth;
        const height = document.documentElement.clientHeight;
        if (window.orientation == 180 || window.orientation == 0) {
            contentDOM.style.width = height + 'px';
            contentDOM.style.height = width + 'px';
            contentDOM.style.top = (height - width) / 2 + 'px';
            contentDOM.style.left = 0 - (height - width) / 2 + 'px';
            contentDOM.style.transform = 'rotate(90deg)';
        }
        if (window.orientation == 90 || window.orientation == -90) {
            contentDOM.style.width = width + 'px';
            contentDOM.style.height = height + 'px';
            contentDOM.style.top = '0px';
            contentDOM.style.left = '0px';
            contentDOM.style.transform = 'none';
        }
    }
    //rotate()
    //window.addEventListener("load", rotate, false);
    //window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", rotate, false);
</script>
</body>
</html>